<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
    alarmData: {
        type: Object,
        required: true,
        default() {
            return {}
        },
    },
    deviceClass: {
        typpe: Number | String,
        default: '',
        required: true,
    },
})
const videoData = ref()
watch(props, (val) => {
    // 筛选出中文字段
    videoData.value = Object.keys(val.alarmData).filter((item) => {
        if (new RegExp('[\u4E00-\u9FA5]+').test(item)) return item
    })
})
</script>
<template>
    <div class="dashboard-top-item today-warn white-box">
        <h4>今日警情</h4>
        <div class="text-center">
            <p class="total">{{ props.alarmData.allCount || '0' }}</p>
            <p class="desc">今日报警总数</p>
        </div>
        <el-divider />
        <!-- 视频设备 -->
        <el-scrollbar v-if="deviceClass == 1001">
            <el-row class="text-center scrollbar-flex-content mt-10">
                <el-col :span="8" v-for="item in videoData" :key="item">
                    <p class="num">{{ props.alarmData[item] || '0' }}</p>
                    <p class="desc">{{ item || '--' }}</p>
                </el-col>
            </el-row>
        </el-scrollbar>

        <!-- 用户传输装置 -->
        <el-row class="text-center" v-else-if="deviceClass == 2001">
            <el-col :span="8">
                <p class="num">{{ props.alarmData.fireAlarm || '0' }}</p>
                <p class="desc">火警</p>
            </el-col>
            <el-col :span="8">
                <p class="num">{{ props.alarmData.fault || '0' }}</p>
                <p class="desc">故障</p>
            </el-col>
            <el-col :span="8">
                <p class="num">{{ props.alarmData.systemEvent || '0' }}</p>
                <p class="desc">系统事件</p>
            </el-col>
        </el-row>
        <!-- 建筑消防用水 -->
        <el-row class="text-center" v-else-if="deviceClass == 2002">
            <el-col :span="6">
                <p class="num">{{ props.alarmData.endWaterTest || '0' }}</p>
                <p class="desc">末端试水</p>
            </el-col>
            <el-col :span="6">
                <p class="num">{{ props.alarmData.fireWaterTank || '0' }}</p>
                <p class="desc">消防水箱</p>
            </el-col>
            <el-col :span="6">
                <p class="num">
                    {{ props.alarmData.indoorFireHydrant || '0' }}
                </p>
                <p class="desc">室内消火栓</p>
            </el-col>
            <el-col :span="6">
                <p class="num">
                    {{ props.alarmData.outdoorFireHydrant || '0' }}
                </p>
                <p class="desc">室外消火栓</p>
            </el-col>
        </el-row>
        <!-- 智慧烟感 -->
        <el-row class="text-center" v-else-if="deviceClass == 2003">
            <el-col :span="12">
                <p class="num">{{ props.alarmData.smokeAlarm || '0' }}</p>
                <p class="desc">烟雾告警</p>
            </el-col>
            <el-col :span="12">
                <p class="num">{{ props.alarmData.abnormalSignal || '0' }}</p>
                <p class="desc">信号异常</p>
            </el-col>
        </el-row>
        <!-- 电气火灾 -->
        <el-row class="text-center" v-else-if="deviceClass == 2004">
            <el-col :span="6">
                <p class="num">{{ props.alarmData.voltage || '0' }}</p>
                <p class="desc">电压</p>
            </el-col>
            <el-col :span="6">
                <p class="num">{{ props.alarmData.electricCurrent || '0' }}</p>
                <p class="desc">电流</p>
            </el-col>
            <el-col :span="6">
                <p class="num">{{ props.alarmData.temperature || '0' }}</p>
                <p class="desc">温度</p>
            </el-col>
            <el-col :span="6">
                <p class="num">{{ props.alarmData.leakageCurrent || '0' }}</p>
                <p class="desc">漏电流</p>
            </el-col>
        </el-row>
        <!-- 可燃气体 -->
        <el-row class="text-center" v-else-if="deviceClass == 2005">
            <el-col :span="24">
                <p class="num">{{ props.alarmData.combustibleGas || '0' }}</p>
                <p class="desc">可燃气体</p>
            </el-col>
        </el-row>
        <!-- 水泵监测 -->
        <el-row class="text-center" v-else-if="deviceClass == 2006">
            <el-col :span="24">
                <p class="num">{{ props.alarmData.voltageFault || '0' }}</p>
                <p class="desc">电压故障</p>
            </el-col>
        </el-row>
    </div>
</template>
<style lang="scss" scoped>
.today-warn {
    .num {
        font-size: 20px;
        font-weight: bold;
        padding: 0;
    }
    .total {
        font-size: 30px;
        font-weight: bold;
        color: #000;
    }
    .el-divider {
        margin: 0;
    }
    .desc {
        color: #666;
        font-size: 12px;
    }
}
.el-row {
    flex-wrap: nowrap !important;
}
.scrollbar-flex-content {
    display: flex;
}
.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-danger-light-9);
    color: var(--el-color-danger);
}
</style>
